@use 'utils/variables';
@use 'utils/mixins';

.StarterEditionRightPannel {
    .svg-image {
        text-align: center;

        svg {
            margin: 0 auto 24px auto;
        }
    }

    .upgrade-title {
        margin: 10px 0;
        color: #3f4350;
        font-family: Metropolis;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
    }

    .advantages-list {
        margin: 7px 0;
        font-size: 12px;
        line-height: 16px;

        .item {
            margin: 10px 0;

            i {
                margin-right: 5px;
            }
        }

        :last-child {
            color: rgba(63, 69, 80, 0.64);
        }
    }

    .purchase_buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin-top: 20px;

        @media screen and (max-width: 1130px) {
            flex-direction: column;

            button {
                width: 100% !important;

                &.contact-us {
                    margin-top: 10px;
                    margin-left: 0 !important;
                }
            }
        }
    }

    .upgrade-error {
        margin-top: 10px;
    }
}

.StarterLeftPanel {
    position: relative;

    .PlanDetails__viewPlansButton {
        position: absolute;
        right: 10px;
        display: block;
        margin-left: auto;
    }

    .pre-title {
        margin-bottom: 10px;
        color: rgba(63, 67, 80, 0.75) !important;
        font-size: 12px;
        font-weight: 600;
        line-height: 16px;
    }

    .title {
        color: #3f4350;
        font-family: Metropolis;
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
    }

    .subtitle {
        color: #3d3c40;
        font-size: 12px;
        font-style: normal;
        font-weight: normal;
        line-height: 16px;
    }

    .content {
        margin: 25px 0;
        font-size: 12px;
    }

    .licenseInformation {
        border-radius: 4px;

        .licenseKeyTitle {
            font-family: Metropolis;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
        }

        .uploadButtons {
            margin-top: 10px;

            input {
                display: hidden;
            }

            .help-text {
                font-size: 12px;
            }
        }
    }
}
